<!-- 审批详细，处理审批，查看评价的公共组件 -->
<template>
    <div style="
                border-radius: 15px;
                background-color: rgb(223, 249, 255);
                display: flex;
                justify-content: space-between;
                margin-left: 10px;
              ">
        <h2 style="font-size: 18px; margin-left: 20px;margin-top: 20px;">{{theme}}</h2>
        <!-- 这个span是icon -->
        <h5 style="font-size: 14px; margin-right: 40px; color: rgb(102, 102, 122)">
            待处理审批 <span style="color: rgb(255, 204, 0);margin-left: 10px;"> {{ myDate}} </span>
        </h5>
        <!-- 这里是变量，处理状态 -->
    </div>
    <div style="margin-left: 10px">
        <p style="font-size: 14px; color: rgb(153, 153, 153)">
            审批类型: <span style="color: rgb(14, 14, 14)">{{ type }}</span>
        </p>
        <!-- span是变量 -->
    </div>
    <div style="
                height: 80px;
                display: flex;
                justify-content: space-between;
                margin-left: 10px;
                border-bottom: 2px solid rgb(81, 210, 210);
              ">
        <div style="width: 80%; height: 60px; margin-top: 15px;margin-left: 10px">
            <p class="workname">提报人姓名： <span class="workspan">{{ applyname }} </span></p>
            <p class="workname">提报人职务： <span class="workspan">{{applygrude}} </span></p>
            <p class="workname"> 提报人手机： <span class="workspan">{{ phone }}</span></p>
            <p class="workname"> 提报人固定电话： <span class="workspan">{{fixphone}}</span> </p>
        </div>
    
    </div>
    <slot name="evaluate"></slot><!-- 这个插槽是审批评价管理查看评价的插槽 -->
    <div>
        <h4 style="margin-left: 10px;border-bottom:2px solid rgb(81, 210, 210) ;margin-top: 40px;color: rgb(0,204,255);">
            审批进度</h4>
        <div style="width:100%;height: 40px;background-color: rgb(255, 244,223);line-height: 10px;border-radius: 10px;">

            <p style="display: inline-block;color: rgb(102,102, 102);">当前处理机构：<span
                    style="color:black">{{link}}</span></p>
        </div>
        <div style="margin-top: 40px;">
            <el-timeline>
                <slot name="appraise"></slot> <!-- 这个插槽是查看审批的插槽 -->
                <slot name="approval"></slot><!-- 这个插槽是处理审批的插槽 -->
            </el-timeline>
        </div>
        <div style="margin-left: 70%;">
            <slot name="submiting"></slot> <!-- 这个插槽是处理审批，提交功能的插槽 -->
            <el-button type="primary" style="width: 120px; height: 40px;background-color: rgb(0,153,255);"
                @click="close">关闭</el-button>
        </div>
    </div>
</template>
  
<script lang="ts">
import { ref,onMounted } from 'vue';
import { useRouter } from 'vue-router';  //使用路由
import { useRoute } from 'vue-router';
import axios from 'axios';
export default {
    name:"chakanApproval",
    setup() {
        const router = useRouter()
        const route = useRoute()

        //id
        let hh:any = ref(route.query.id)
        let ww:any = parseInt(hh.value)
        let link:any = ref(route.query.link)
        // let myDate:any = ref()
        //时间
        var myDate:any = new Date(); 
        myDate = myDate.toLocaleString()
        //查看标题
        let theme:any = ref('')
        //查看类型
        let type:any = ref('')
        //姓名
        let applyname:any = ref('')
        //职务
        let applygrude:any = ref('')
        //电话
        let phone:any = ref('')
        //固定电话
        let fixphone:any = ref('')
        const getCurrent = () => {
            axios({
                url: 'http://1.14.73.59:8080/sp/spxx',
                method: 'post',
                params: {
                    id: ww
                }
            }).then(resp => {
                console.log(resp.data.data)
                theme.value = resp.data.data.theme
                type.value = resp.data.data.type
                applyname.value = resp.data.data.applyname
                applygrude.value = resp.data.data.applygrude
                phone.value = resp.data.data.phone
                fixphone.value = resp.data.data.fixphone
            });
        }

        onMounted(() => {
            getCurrent()
        })

        const close = () => {
            router.push('/ApprovaChecklist')
            console.log('关闭了')
        }

        return{
            close,
            router,
            myDate,
            getCurrent,
            theme,
            type,
            applyname,
            applygrude,
            phone,
            fixphone,
            link
        }
    }
}

</script>
  
<style scoped>
.workname {
    display: inline-block;
    width: 22%;
    font-size: 14px;
    color: rgb(153, 153, 153);
    margin-top: 22px;
    margin-right: -40px;
}

.workspan {
    color: rgb(14, 14, 14);
}
</style>